<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检查用户名是否可用</title>
    <script src="../js/axios.js" defer></script>
</head>
<body>
<div>
    <p>
        用户名:<input type="text" id="mingzi"><button id="checkBtn">检查</button
    </p>
    <p>检查结果:<span id="result">无</span></p>
</div>
</body>
<script>
    //如果它有ID，可用document.getElementById("")或querySelector
    // 如果没有id，则建议使用querySelector
    let username=document.getElementById("mingzi")
    let checkBtn=document.getElementById("checkBtn")
    let result=document.querySelector("#result")
    checkBtn.addEventListener('click',function (){
        // console.log(username.value)

        // let msg=username.value+'是好人'
        // result.innerHTML=msg

        let name=username.value
        if (name.length>0){
            // alert("正在发生数据")
            axios({
                method:'GET',
                url:'http://101.43.149.52:8080/brand_crud/user',
                params:{
                    method:'checkUsername',
                    username:name
                }
            }).then(function (resp) {
                console.log(resp.data.result)
                if (resp.data.result ==='USERNAME_CAN_USE'){
                    //名字能用
                    result.innerHTML='此名称可以使用'
                }else{
                    //名字不能用
                    result.innerHTML='此名称已存在，不可使用'
                }
            })
        }else {
            alert("请输入你的名字")
        }
    })
</script>
</html>